﻿<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
    <style>
        body {
            font-family: 'Microsoft YaHei';
            padding: 0px;
            margin: 0px;
            background-color:#000;
            /*background-image: url('./images/s3-3-1/s3-3-1-bg.jpg');
            background-repeat: no-repeat;*/
            width: 1920px;
            height: 1080px;
        }

        em {
            color: #fff100;
            font-style: normal;
            font-size: 18pt;
            vertical-align: middle;
            margin-left: 5px;
        }

        .countText {
            color: #fff100;
            font-size: 42pt;
            font-weight: bold;
        }

        #table {
            margin-top: 0px;
            margin-left: 10px;
            /*创建3D场景*/
            -webkit-perspective: 600px;
            -webkit-perspective-origin: 50% 50%;
            -webkit-transform-style: -webkit-preserve-3d; /*告诉浏览器以下transform操作是在3D场景下进行的*/
        }

            #table .row {
                width: 590px;
                height: 55px;
            }

                #table .row .col1 {
                    float: left;
                    font-size: 24px;
                    margin-left:9px;
                    width: 32px;
                    height: 32px;
                    text-align: center;
                    margin-top: 10px;
                    background-image:url('images/s3-3-1/numberbg.png');
                    background-repeat:no-repeat;
                }

                #table .row .col2 {
                    float: left;
                    font-size: 24px;
                    height: 45px;
                    width: 460px;
                    text-align: left;
                    margin-left: 15px;
                    margin-top: 10px;
                }

    </style>
    <title>机构</title>
</head>
<body>
    <div id="container" style="height: 100%; width: 1920px; height: 1080px; position: absolute; left: 0px; top: 0px;"></div>
    <img src="images/s3-3-1/earth-bg.png" style="position: absolute; left: 830px; top: 270px; display:none;" id="ctlEarthBG" />
    <div id="container2" style="height: 100%; width: 1920px; height: 1080px; position: absolute; left: 0px; top: 0px; "></div>
    <div style="color: #fff; width: 510px; position: absolute; left: 1400px; top: 65px; display: none;" id="ctlTableRight">
        <div style="font-size: 32px; margin-top: 0px; height: 50px; background-color: #0c0e47;">
            <div id="title" style="font-size: 32px; margin-left: 110px; margin-top: 20px; color: #fff100;">
            </div>
        </div>
        <div style="font-size: 24px; margin-left: 190px; margin-top: 0px; color: #fff100;">组织机构名称</div>
        <div id="table">
        </div>
    </div>
    <div style="height: 100%; width: 420px; height: 80px; position: absolute; left: 100px; top: 50px; color: #fff; font-size: 32px;" id="ctlLabelTime">
    </div>
    <img src="images/s3-3-1/icontimer.png" style="position: absolute; left: 50px; top: 55px;" id="ctlIconTimer" />
    <img src="images/s3-3-1/title.png" style="position: absolute; left: 620px; top: 30px;" id="ctlImgTitle" />
    <button style="position: absolute; left: 0px; top: 0px; width:120px; height:30px;" onclick="eventShowChina()">显示中国</button>
        <script type="text/javascript" src="assets/jquery.js"></script>
        <script type="text/javascript" src="assets/echarts.min.js"></script>
        <script type="text/javascript" src="assets/dataTool.min.js"></script>
        <script type="text/javascript" src="assets/china.js"></script>
        <script type="text/javascript" src="assets/echarts/map/jiangsu.js"></script>
        <script src="./assets/jzcode.js"></script>
        <script src="./assets/jzcode.event.local.js"></script>
        <script src="./content/s3-3-1-event.js"></script>
        <script src="./content/jzcode.sinotrans.js"></script>
        <script type="text/javascript" src="assets/esl.js"></script>
        <script type="text/javascript">
            var g_timerTableLoop = null;
            var dom = document.getElementById("container");
            var myChart = echarts.init(dom);
            var app = {};
            option = null;

            var g_datArea = null;

            // 转换为map数据需要的数据结构
            // mapdata:   {names:[],values:[]}
            function convertMapData(mapData) {
                var lData = [];
                for (var index = 0; index < mapData.names.length; index++) {
                    lData.push({ name: mapData.names[index], value: mapData.values[index] });
                }
                return lData;
            }

            // posData:    coordMap:{name:[]}
            // nvData:   {names:[],values:[]}
            function convertMapPosData(posData, nvData) {
                var lData = [];
                for (var name in posData.coordMap) {
                    for (var index = 0; index < nvData.names.length; index++) {
                        if (name == nvData.names[index]) {
                            posData.coordMap[name].push(nvData.values[index]);
                            if (name == '澳门' || name == '北京' || name == '安徽') {
                                lData.push({
                                    name: name,
                                    value: [posData.coordMap[name][0], posData.coordMap[name][1], nvData.values[index]],
                                    label: {
                                        normal: {
                                            position: 'left',
                                        }
                                    }
                                });
                            } else if (name == '江苏') {
                                lData.push({
                                    name: name,
                                    value: [posData.coordMap[name][0], posData.coordMap[name][1], nvData.values[index]],
                                    label: {
                                        normal: {
                                            position: 'right',
                                            offset: [0, -10]
                                        }
                                    }
                                });
                            } else {
                                lData.push({
                                    name: name,
                                    value: [posData.coordMap[name][0], posData.coordMap[name][1], nvData.values[index]],
                                    label: {
                                        normal: {
                                            position: 'right'
                                        }
                                    }
                                });
                            }
                            break;
                        }
                    }
                }
                return lData;
            }

            var g_datAreaTop5Colors = ['#fe2020', '#fe2a2a', '#ff7e28', '#fea41c', '#ffd119', '#ffff18', '#b3e814', '#1ed21e', '#18d118', '#43d943'];
            function convertProvinceCountTop5Data(data) {
                var result = [];
                for (var index = 0; index < data.length; index++) {
                    result.push({
                        value: data[index],
                        itemStyle: {
                            normal: {
                                color: g_datAreaTop5Colors[index]
                            }
                        }
                    });
                }
                return result;
            }
            function convertCompanyAreaTop10(data) {
                var result = [];
                for (var index = data.length - 1; index >= 0; index--) {
                    result.push({
                        value: data[index],
                        itemStyle: {
                            normal: {
                                color: g_datAreaTop5Colors[index]
                            }
                        }
                    });
                }
                return result;
            }

            var g_topDcColor = ['#ff0000', '#ff2f2f', '#ff4b4b', '#eb6100', '#ff9000', '#a8ff00', '#8fc31f', '#4dae0e', '#00a866', '#088353'];
            function convertTopDc(data) {
                var result = [];
                for (var index = 0; index < data.xValues.length; index++) {
                    result.push({
                        value: 10,
                        name: data.xValues[index] + ':' + data.yValues[index] + 'TEU/吨',
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: 'rgba(222,0,0,0)',//g_topDcColor[index],
                                borderWidth: 0
                            }
                        }
                    });
                }
                result.push({
                    value: 9.8, name: '',
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(222,0,0,0)',//g_topDcColor[index],
                            borderWidth: 0
                        }
                    }
                });
                result.push({
                    value: 9.9, name: '',
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(222,0,0,0)',//g_topDcColor[index],
                            borderWidth: 0
                        }
                    }
                });
                return result;
            }

            var s3_3 = {
                seriesCity: null,
                init: function () {
                    this.seriesCity = {
                        name: 'city',
                        type: 'scatter',
                        symbol: 'image://./images/s3-1/icon-ck.png',
                        symbolSize: [16, 26],
                        symbolOffset: [0, -13],
                        geoIndex: 0,
                        coordinateSystem: 'geo',
                        label: {
                            normal: {
                                formatter: function (params) {
                                    return params.value[2];
                                },
                                show: true,
                                textStyle: {
                                    fontSize: 18,
                                    fontWeight: 'bold'
                                }
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        itemStyle: {
                            normal: {
                                //borderColor: '#fff',
                                color: '#F00',
                            }
                        }
                    };
                }
            };

            var g_datCity = null;
            var g_datOrgTable = null;
            var g_areaArr = ['北京', '上海', '广东'];
            var g_areaIndex = 0;
            var g_offset = 0;
            var g_offsetMax = 0;
            var g_orgCount = 16;
            $.get(jzcode.data.getUrl('./data/s3-3-area.json'), function (datAreaJson) {
                $.get(jzcode.data.getUrl('./data/com-city-pos.json'), function (datCityJson) {
                    $.get(jzcode.data.getUrl('./data/s3-3-table.json'), function (datOrgTable) {
                        g_datArea = datAreaJson;
                        g_datCity = datCityJson;
                        g_datOrgTable = datOrgTable;

                        s3_3.init();
                        option = {
                            graphic: {
                                elements: [{
                                    type: 'image',
                                    left: 340,
                                    top: 241,
                                    style: {
                                        image: './images/s3-3-1/label-total.png'
                                    },
                                    z: 3
                                }]
                            },
                            geo: [{
                                map: 'china',
                                silent: true,
                                label: {
                                    emphasis: {
                                        show: false,
                                        areaColor: '#eee'
                                    }
                                },
                                itemStyle: {
                                    normal: {
                                        areaColor: '#0009ff',
                                        borderColor: '#fff',
                                        borderWidth: 2
                                    }
                                },
                                left: 30,
                                top: 120,
                                bottom: 220,
                                right: 960,
                                roam: false
                            }
                            ],
                            visualMap: [
                                //{
                                //    left: 'left',
                                //    top: 'bottom',
                                //    text: ['高', '低'],           // 文本，默认为数值文本
                                //    calculable: false,
                                //    orient: 'horizontal',
                                //    itemWidth: 20,
                                //    itemHeight: 210,
                                //    show: false,
                                //    seriesIndex: 0,
                                //    inRange: {
                                //        color: ['#d7e3ef', 'yellow']
                                //    },
                                //    outRange: {
                                //        color: ['white']
                                //    },
                                //    left: 140,
                                //    top: 840,
                                //    textStyle: {
                                //        color: '#fff'
                                //    }
                                //}
                            ],
                            series: [
                                {
                                    name: 'iphone3',
                                    type: 'map',
                                    mapType: 'china',
                                    left: 30,
                                    top: 120,
                                    bottom: 220,
                                    right: 960,
                                    roam: false,
                                    slient: true,
                                    label: {
                                        normal: {
                                            show: false,
                                            textStyle: {
                                                color: '#555577',
                                                fontSize: 20
                                            },
                                            formatter: function (value, index) {
                                                return value.name;
                                            }
                                        },
                                        emphasis: {
                                            show: false,
                                            textStyle: {
                                                color: '#555577',
                                                fontSize: 20
                                            },
                                            formatter: function (value, index) {
                                                return value.name;
                                            }
                                        }
                                    },
                                    itemStyle: {
                                        normal: {
                                            areaColor: '#0009ff',
                                            borderColor: '#fff',//'rgba(0,0,10,0.2)',
                                            borderWidth: 1
                                        },
                                        emphasis: {
                                            areaColor:'yellow',
                                            borderColor: '#fff',//'rgba(0,0,10,0.2)',
                                            borderWidth: 2
                                        }
                                    },
                                    data: null
                                }, s3_3.seriesCity
                            ]
                        };


                        g_areaIndex = 0;
                        g_offset = 0;
                        g_offsetMax = g_datOrgTable[g_areaArr[g_areaIndex]].length - g_orgCount;
                        $('#title').html(g_areaArr[g_areaIndex] + '地区组织机构(' + g_datOrgTable[g_areaArr[g_areaIndex]].length + '个)');

                        option.series[0].data = [{
                            name: g_areaArr[g_areaIndex], value: 1000, selected: true
                        }];

                        $('#table').empty();
                        for (var index = g_offset; index < g_offset + g_orgCount; index++) {
                            if (index < g_datOrgTable[g_areaArr[g_areaIndex]].length) {
                                $('#table').append('<div class="row" id="row' + index + '"><div class="col1">' + (index + 1) + '</div><div class="col2">'
                                    + g_datOrgTable[g_areaArr[g_areaIndex]][index] + '</div></div>');
                            } else {
                                $('#table').append('<div class="row" id="row' + index + '"><div class="col1">-</div><div class="col2">-</div></div>');
                            }
                        }

                    }, 'json');
                }, 'json');
            }, 'json');

            register();


            $(document).ready(function () {
                loadScript([
                    'assets/echarts-x/echarts-x.js',
                    'assets/echarts/echarts.js',
                    'assets/echarts/chart/map.js'
                ], function () {
                    require.config({
                        paths: {
                            "lib": 'assets',
                            'echarts-x': 'assets/echarts-x',
                            'echarts': 'assets/echarts'
                        }
                    });
                    boot();
                });
            });

            function loadScript(urlList, onload) {
                var count = urlList.length;;
                for (var i = 0; i < urlList.length; i++) {
                    var script = document.createElement('script');
                    script.async = true;

                    script.src = urlList[i];
                    script.onload = function () {
                        count--;
                        if (count === 0) {
                            onload && onload();
                        }
                    }

                    document.getElementsByTagName('head')[0].appendChild(script);
                }
            }


            function boot() {
                require(['content/s3-3-2']);

                $('#ctlLabelTime').html(getNowFormatYYMMDDHHMM());
                window.setInterval(function () {
                    $('#ctlLabelTime').html(getNowFormatYYMMDDHHMM());
                }, 5000);
                loadBodyBackground();
            }

            function getNowFormatYYMMDDHHMM() {
                var date = new Date();
                var seperator1 = "-";
                var seperator2 = ":";
                var month = date.getMonth() + 1;
                var strDate = date.getDate();
                var strHour = date.getHours();
                var strMinutes = date.getMinutes();
                if (month >= 1 && month <= 9) {
                    month = "0" + month;
                }
                if (strDate >= 0 && strDate <= 9) {
                    strDate = "0" + strDate;
                }
                if (strHour >= 0 && strHour <= 9) {
                    strHour = "0" + strHour;
                }
                if (strMinutes >= 0 && strMinutes <= 9) {
                    strMinutes = "0" + strMinutes;
                }
                var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
                        + " " + strHour + seperator2 + strMinutes;
                return currentdate;
            }

            function loadBodyBackground() {
                $("body").css("background-image", "url('./images/s3-3-1/s3-3-1-bg.jpg')");
                $("body").css("background-repeat", "no-repeat");
                $('#ctlEarthBG').show();
            };
            function showMapChina() {
                s3_3.seriesCity.data = convertMapPosData(g_datCity, g_datArea);

                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }
            }

            var g_tableData = null;
            function showListTable() {
                $('#ctlIconTimer').show();
                $('#ctlImgTitle').show();
                $('#ctlTableRight').show();
                if (g_timerTableLoop == null) {
                    g_timerTableLoop = window.setInterval(function () {
                        g_tableData = [];
                        g_offset+=5;
                        if (g_offset > g_offsetMax) {
                            // next  area
                            g_areaIndex++;
                            if (g_areaIndex >= g_areaArr.length) {
                                g_areaIndex = 0;
                                g_offset = 0;
                                g_offsetMax = g_datOrgTable[g_areaArr[g_areaIndex]].length - g_orgCount;
                                $('#title').html(g_areaArr[g_areaIndex] + '地区组织机构(' + g_datOrgTable[g_areaArr[g_areaIndex]].length + '个)');

                                option.series[0].data = [{
                                    name: g_areaArr[g_areaIndex], value: 1000, selected: true
                                }];
                                myChart.setOption(option);
                            } else {
                                g_offset = 0;
                                g_offsetMax = g_datOrgTable[g_areaArr[g_areaIndex]].length - g_orgCount;
                                $('#title').html(g_areaArr[g_areaIndex] + '地区组织机构(' + g_datOrgTable[g_areaArr[g_areaIndex]].length + '个)');

                                option.series[0].data = [{
                                    name: g_areaArr[g_areaIndex], value: 1000, selected: true
                                }];
                                myChart.setOption(option);
                            }
                            for (var index = g_offset; index < g_offset + g_orgCount; index++) {
                                if (index < g_datOrgTable[g_areaArr[g_areaIndex]].length) {
                                    g_tableData.push([index + 1, g_datOrgTable[g_areaArr[g_areaIndex]][index]]);
                                }
                            }
                        } else {
                            for (var index = g_offset; index < g_offset + g_orgCount; index++) {
                                if (index < g_datOrgTable[g_areaArr[g_areaIndex]].length) {
                                    g_tableData.push([index + 1, g_datOrgTable[g_areaArr[g_areaIndex]][index]]);
                                }
                            }
                        }
                        rotateTableRow();
                    }, 5000);
                }
            }


            function rotateTableRow() {
                var x = 0;

                var panelArr = [];
                for (var index = 0; index < g_orgCount; index++) {
                    var rowObj = $('#row' + index);
                    panelArr.push(rowObj);
                }
                var flag = true;
                var timer = setInterval(function () {
                    if (Math.round(x) >= 90 && flag) {
                        for (var index = 0; index < panelArr.length; index++) {
                            if (index < g_tableData.length) {
                                panelArr[index].find('.col1').html(g_tableData[index][0]);
                                panelArr[index].find('.col2').html(g_tableData[index][1]);
                            } else {
                                panelArr[index].find('.col1').html('');
                                panelArr[index].find('.col2').html('');
                            }
                        }
                        flag = false;
                    }
                    if (Math.round(x) >= 358) {
                        for (var index = 0; index < panelArr.length; index++) {
                            panelArr[index].css('transform', 'rotateX(360deg)');
                            panelArr[index].css('webkit-transform', 'rotateX(360deg)');
                        }
                        clearInterval(timer);
                        return false;
                    } else {
                        x += 2 + (360 - x) / 60;
                        for (var index = 0; index < panelArr.length; index++) {
                            panelArr[index].css('transform', 'rotateX(' + x + 'deg)');
                            panelArr[index].css('webkit-transform', 'rotateX(' + x + 'deg)');
                        }
                    }
                }, 25);
            }
        </script>
</body>
</html>